<template>
	<view class="action-sheet-mask" v-if="props.show" @click="onCancelSheet"></view>
	<view class="action-sheet-component" v-if="props.show" >
		<view class="header">
			<view class="title">请选择孩子</view>
			<image @click="onCloseSheet" class="close" src="/static/icon/close.png" style="width:20px;  height: 20px;"></image>
		</view>
		<view class="main">
			<view class="item" v-for="stu in props.actions" :key="stu.id" @click="() => onSelect(stu)">
				<view class="name" :style="queryColor(stu.color)"> {{stu.name}} </view>
				<view class="description">{{ stu.subname }}</view>
			</view>
		</view>
		<view class="floter" @click="onCancelSheet">
			<view class="cancel">取消</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {onShow, onHide} from "@dcloudio/uni-app"
	interface actionSheetProps{
		show: boolean
		title: string
		actions: Array<{
			id: string | number
			name: string
			subname: string
			color: string
		}>
	}
	
	const props = withDefaults(defineProps<() => actionSheetProps>(), {
		show: false,
		title:'请选择',
		actions: []
	})
	
	const queryColor = (color: string) => {
		return {
			color
		}
	}
	
	
	onShow(() => {
		// 当遮罩层显示时
		uni.pageScrollTo({
		    scrollTop: 0,
		    duration: 0
		});
		uni.onWindowResize(() => {
		    uni.pageScrollTo({
		        scrollTop: 0,
		        duration: 0
		    });
		});
	})
	onHide(() => {
		// 当遮罩层消失时
		uni.offWindowResize(() =>{});
	})

	
	const emits = defineEmits(['close', 'select', 'cancel'])
	
	const onCloseSheet = () => {
		emits('close')
	}
	const onCancelSheet = () => {
		emits('cancel')
	}
	const onSelect = (item) => {
		emits('select', item)
	}
	
	
	
</script>

<style scoped lang="scss">
	.action-sheet-mask{
		position: fixed;
		background-color: rgba(0, 0, 0, 0.5);
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 50;
	}
	.action-sheet-component{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 60;
		max-height: 90vh;
		background-color: #fff;
		border-top-right-radius: 50upx;
		border-top-left-radius: 50upx;
		.header{
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			padding: 30upx 0;
			.title{
				font-size: 32upx;
				font-weight: bold;
				color: #000;
			}
			.close{
				position: absolute;
				right: 60upx;
				top:30upx;
			}
		}
		.main{
			overflow-y: auto;
			max-height: 70vh;
			.item{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 20upx 0;
				.name{
					color: #2bc888;
					font-size: 32upx;
					margin-bottom: 20upx;
				}
				.description{
					font-size: 24upx;
					color: #afafaf;
				}
			}
			
		}
		.floter{
			border-top: 20upx solid #f0f0f0;
			width: 100%;
			height: 100upx;
			.cancel{
				width: 100%;
				height: 100upx;
				line-height: 100upx;
				display: flex;
				justify-content: center;
				align-content: center;
				font-size: 32upx;
				color: #40444f;
			}
		}
	}
	
</style>